<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
  <Modal :width="700"
         v-model='modal'
         title='查看大图'
         transfer
         :mask-closable='false'
         footer-hide>
    <div style="position: relative;"
         class="bigimgicon">
      <Icon style="left:8px;"
            class="bigimgicons"
            type="md-arrow-dropleft-circle"
            @click="clickimg(true)" />
      <Icon style="right:8px;"
            class="bigimgicons"
            type="md-arrow-dropright-circle"
            @click="clickimg(false)" />
      <div style="display: flex;align-items: center;justify-content: center;">
        <img :class="classname"
             :src="imglist[index]" />
      </div>
      <div style="display: flex;justify-content:center;align-items: center;">
        <!-- <i class="iconfont icon-nishizhenxuanzhuan" @click="degimgsubtract"/> -->
        <i class="iconfont icon-rotatexuanzhuan"
           @click="degimgsubtract" />
        <Page style="margin: 0 16px"
              :current="index+1"
              :total="imglist.length"
              size="small"
              :page-size="1"
              @on-change="changeChartPages" />
        <i class="iconfont icon-rotatexuanzhuan2"
           @click="degimgadd" />
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      modal: false,
      index: 0,
      imglist: [],
      deg: 0,
      classname: ''
    };
  },
  /* 函数方法集合 */
  methods: {
    /* @函数功能: 初始化 */
    initial (index, list) {
      this.index = index
      this.imglist = list
      this.modal = true
    },
    clickimg (bool) {
      if (!bool) {
        this.index = this.index + 1
        if (this.index > this.imglist.length - 1) this.index = 0
      } else {
        this.index = this.index - 1
        if (this.index < 0) this.index = this.imglist.length - 1
      }
      // console.log(this.index, this.imglist.length)
    },
    changeChartPages (e) {
      this.index = e - 1
      this.deg = 0
      this.classname = ''
    },
    degimgadd () {
      this.deg++
      let num = this.deg % 4
      switch (num) {
        case 0: this.classname = ''; break;
        case 1: this.classname = 'img90'; break;
        case 2: this.classname = 'img180'; break;
        case 3: this.classname = 'img270'; break;
        case -0: this.classname = ''; break;
        case -1: this.classname = 'img270'; break;
        case -2: this.classname = 'img180'; break;
        case -3: this.classname = 'img90'; break;
      }
    },
    degimgsubtract () {
      this.deg--
      let num = this.deg % 4
      // console.log(num)
      switch (num) {
        case 0: this.classname = ''; break;
        case 1: this.classname = 'img90'; break;
        case 2: this.classname = 'img180'; break;
        case 3: this.classname = 'img270'; break;
        case -0: this.classname = ''; break;
        case -1: this.classname = 'img270'; break;
        case -2: this.classname = 'img180'; break;
        case -3: this.classname = 'img90'; break;
      }
    }
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2788485 */
  src: url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.woff2?t=1630656498658")
      format("woff2"),
    url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.woff?t=1630656498658")
      format("woff"),
    url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.ttf?t=1630656498658")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-rotatexuanzhuan2:before {
  content: "\e6e2";
}

.icon-rotatexuanzhuan:before {
  content: "\e6eb";
}

.bigimgicon {
  .bigimgicons {
    color: rgba(0, 0, 0, 0.5);
    font-size: 50px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  img {
    width: 500px;
    height: 500px;
    object-fit: contain;
    transition: all 0 ease-in-out;
  }
}
.img90 {
  transform: rotate(90deg) !important;
}
.img180 {
  transform: rotate(180deg) !important;
}
.img270 {
  transform: rotate(270deg) !important;
}
</style>
